<script lang="ts" setup>
import { useRoute } from 'vue-router'
import { computed, onActivated, onMounted, reactive, watch } from 'vue'
import { changeRoute, changeRouteExecute, routeConst } from '../../../router'
import { appState } from '../../../common/manager/appManager'
import NavMenuItem from './NavMenuItem.vue'
import { deepCopyObject, hasOwnProp, travelTree } from '../../../common/utils/normalUtils'
import { getPathMenuRoot } from '../../../common/utils/OldSysTools'

const route = useRoute()
const state:any = reactive({
  openMenuItems: [],
  currentActiveItem: '/main/org',
  source: appState.showMenus
})
// 菜单平铺
const menuMap:any = appState.menuMap

/**
 * 切换路由
 * @param menu
 */
const changeRouteHandler = (val:any) => {
  const menu:any = menuMap[val]
  changeRoute(menu.path, menu.query || null)
}

const initTreeActive = (val:any) => {
  travelTree(state.source, (item:any) => {
    item.selected = false
    if (item.path === val) {
      item.selected = true
      state.openMenuItems = item.openPath
      state.currentActiveItem = item.path
    }
  })
}

/**
 * 子系统导航模式 根据路由初始化菜单列表
 */
const initViewMainMenu = () => {
    state.source = appState.menuList
}

/**
 * 显示logo
 */
const logoImg = computed(() => {
  return appState.menuMini ? './logo_mini.png' : './logo.png'
})

/**
 * 点击logo处理
 */
const logoHandler = () => {
}

watch(() => route.path, (val:any) => {
  initTreeActive(val)
})

onActivated(() => {
  initViewMainMenu()
  initTreeActive(route.path)
})

onMounted(() => {
  initViewMainMenu()
  initTreeActive(route.path)
})


</script>

<template>
  <div :class="['left-menu',appState.menuMini?'left-menu-mini':'']" >
    <div class="logo-box" @click="logoHandler">
      <div class="logo-img">
        <img :src="logoImg" />
      </div>
      <div v-if="!appState.menuMini" class="sys-name">
        <div class="sys-name-p">
          {{ appState.platform }}
        </div>
        <div class="sys-name-t">
          {{ appState.alias }}
        </div>
      </div>
    </div>

    <div class="menu-box">
      <el-menu class="el-menu-left"
               :default-active="state.currentActiveItem"
               :default-openeds="state.openMenuItems"
               :collapse="appState.menuMini"
               :collapse-transition="false"
               @select="changeRouteHandler">
        <template v-for="item of state.source">
          <nav-menu-item v-if="!item.hidden" :data="item" />
        </template>
      </el-menu>
    </div>
  </div>
</template>

<style scoped lang="scss">

.left-menu[sys-md="1"]{
  .logo-box{
    @include hor-group();
    flex:none;
    width:100%;
    height:72px;
    background:var(--c-content-color);
    box-sizing: border-box;
    color:var(--w-color-nor);
    cursor:pointer;

    .logo-img{
      @include hor-group(center,center);
      flex:none;
      height:48px;
      overflow: hidden;
      padding: 0 16px;
      box-sizing: border-box;
      &>img{
        flex:none;
        width:48px;
        height:48px;
      }
    }

    .sys-name{
      @include ver-group() ;
      flex:auto;
      width:100%;
      font-size:16px;
      font-weight: 500;

      .sys-name-p{
        display: flex;
      }
    }
  }
}

.left-menu{
  @include ver-group(start,start);
  flex:none;
  width: var(--w-left-size);
  height:100%;
  background: var(--w-bg-box);
  box-sizing: border-box;

  .logo-box{
    @include hor-group();
    flex:none;
    width:100%;
    height:var(--w-logo-size);
    background:var(--index-menu-logo-bg);
    box-sizing: border-box;
    color:#fff;

    .logo-img{
      @include hor-group(center,center);
      flex:none;
      height:30px;
      overflow: hidden;
      padding: 0 8px;
      &>img{
        flex:none;
        width:30px;
        height:30px;
      }
    }
    .sys-name{
      @include ver-group();
      flex:auto;
      width:100%;
      font-size:16px;
      font-weight: bold;
      overflow: hidden;
      .sys-name-p{
        @include text-dot();
        flex:none;
        display: none;
      }
      .sys-name-t{
        @include text-dot();
        flex:none;
      }
    }
  }

  .menu-box{
    flex:auto;
    width:100%;
    height:100%;
    overflow-x: hidden;
    overflow-y: auto;
    box-shadow: 2px 0 6px 0 rgba(176,183,199,.2);
    padding: 10px 0 0 0;
    box-sizing: border-box;
  }

  .el-menu-left{
    width:100%;
    overflow: hidden;
  }
}

.left-menu-mini{
  width: 60px;
  .logo-img{
    padding: 0 8px!important;
  }
}

</style>
